import React, {useState} from "react";

interface LabelManagerProps {
    currentLabel: string;
    labelColors: Map<string, string>;
    onLabelChange: (label: string) => void;
    onSaveLabel: (name: string, color: string) => void;
}

const LabelManager: React.FC<LabelManagerProps> = ({currentLabel, labelColors, onLabelChange, onSaveLabel}) => {
    const [labelName, setLabelName] = useState<string>("");
    const [labelColor, setLabelColor] = useState<string>("#ffffff");

    const handleSaveClick = () => {
        if (labelName.trim() && labelColor) {
            onSaveLabel(labelName, labelColor);
            setLabelName("");
            setLabelColor("#ffffff");
        }
    };

    return (
        <div className="mt-1.5">
            <div className="flex flex-col gap-2">
                {[...labelColors.entries()].map(([label, color]) => (
                    <div
                        key={label}
                        className={`px-4 py-2 rounded-lg text-white font-bold cursor-pointer transition ${
                            currentLabel === label ? "ring-2 ring-offset-2 ring-blue-500" : ""
                        }`}
                        style={{backgroundColor: color}}
                        onClick={() => onLabelChange(label)}
                    >
                        {label}
                    </div>
                ))}

                <label htmlFor="my-modal"
                       className="btn btn-sm px-4 py-2 rounded-lg  font-bold cursor-pointer transition text-pink-500 ">
                    添加标签
                </label>
            </div>

            <input type="checkbox" id="my-modal" className="modal-toggle"/>
            <div className="modal">
                <div className="modal-box">
                    <h3 className="font-bold text-lg">添加新标签</h3>
                    <p className="py-4">请输入标签名称和颜色，然后点击添加标签按钮</p>
                    <div className="flex">
                        <input
                            type="text"
                            placeholder="标签名称"
                            className="input input-bordered w-full"
                            value={labelName}
                            onChange={(event) => setLabelName(event.target.value)}
                        />
                        <input
                            type="color"
                            className="input input-bordered w-12"
                            value={labelColor}
                            onChange={(event) => setLabelColor(event.target.value)}
                        />
                    </div>
                    <div className="modal-action">
                        <label htmlFor="my-modal" className="btn" onClick={handleSaveClick}>
                            确定
                        </label>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default LabelManager;